<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- Vue模板语法有2大类：1.插值语法：功能：用于解析标签体内容。
         写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
         2.指令语法：
            功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。
            举例：v-bind:href="xxx”或简写为：href="xxx"，xxx同样要写js表达式且可以
                直接读取到data中的所有属性。
            备注：Vue中有很多的指令，且形式都是：V-???？，此处我们只是拿v-bind举个例子。 -->
        <div id="root">
            <h1>hello</h1>
            <h3>{{name}}</h3>
            <hr/>
            <!-- 解析标签：属性，内容，时间 -->
            <a v-bind:href="url" v-bind:x="hello">点击跳转{{text}}</a>
            <a :href="url" :x="hello">点击跳转{{school.name.toUpperCase()}}</a>

        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false
            new Vue({
                el:'#root' ,
                data:{
                    name:'张三',
                    url:'http://www.baidu.com',
                    hello:'你好',
                    text:'text',
                    school:{
                        name:'sgg'
                    }
                }

            })//创建实例

        </script>
    </body>
</html> 